<template>
  <div class="headerWrap">
    <div class="headerBox w">
      <div class="loginImg">
        <img src="../../../assets/imgs/logo1.png" alt />
      </div>
      <ul class="clearfix">
        <template v-for="item in menus">
          <li
            v-if="item.id"
            :key="item.id"
            :class="$route.meta.active == item.id ? 'activeMenu' : ''"
          >
            <!-- <img :src="`imgs/${item.newIcon}.png`" v-if="lang === item.hide" />
            <img :src="`imgs/${item.icon}.png`" v-if="lang !== item.hide" />-->
            <el-tooltip
              :disabled="lang !== item.hide"
              effect="dark"
              content="4006037726"
              placement="top-start"
            >
              <span
                :class="
                  item.id === 'customer' && lang !== 'zh' ? 'blueColor' : ''
                "
                @click="handleClickMenus(item.id)"
                >{{ item.name }}</span
              >
            </el-tooltip>
            <!-- 楼层 -->
            <div class="floorBox" v-if="item.id === 'floor' && mantle">
              <div
                target="_blank"
                class="item"
                :class="{
                  grayActive: item.type == 2 && item.url.indexOf('http') == -1,
                  redActive: isFloorSelect(item)
                }"
                v-for="item in floorList"
                :key="item.number"
                @click="handleToUrl(item)"
              >
                <b>{{ item.number }}F</b>
                <span>{{ item.title }}</span>
              </div>
            </div>
          </li>
        </template>
      </ul>
    </div>
    <!-- 蒙层 -->
    <div
      class="v-modal"
      tabindex="0"
      style="z-index: 99;"
      v-if="mantle"
      @click="handleMantle"
    ></div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isFoundation: false,
      mantle: false, // 蒙层
      floorList: [] // 楼层数据
    };
  },
  computed: {
    ...mapState(["lang", "userInfo"]),
    menus() {
      let path = location.href;
      let isFoundation = path.indexOf("/foundation") != -1;
      this.isFoundation = isFoundation;
      const arr = [
        {
          id: "home",
          icon: "item3",
          name: isFoundation ? this.$t("vr.fHome") : this.$t("vr.home")
        },
        {
          id: "floor",
          icon: "item6",
          name: this.$t("vr.floor")
        },
        {
          id: this.lang !== "zh" && isFoundation ? "" : "customer",
          icon: "item8",
          newIcon: "item88",
          name: this.$t("vr.customer"),
          hide: "zh"
        },
        {
          id: isFoundation ? "" : "schedule",
          icon: "item4",
          name: this.$t("vr.schedule")
        },
        {
          id: isFoundation ? "companyProfile" : "",
          icon: "item4",
          name: this.$t("vr.companyProfile")
        },
        {
          id: isFoundation ? "contactUs" : "",
          icon: "item4",
          name: this.$t("vr.contactUs1")
        },
        {
          id: "sample",
          icon: "item7",
          name: this.$t("vr.sample")
        }
      ];
      return arr || [];
    }
  },
  mounted() {},
  methods: {
    ...mapMutations(["isShowLogin"]),

    isFloorSelect(item) {
      var isfoundation = this.$route.path.indexOf("foundation") != -1;
      var isfakuma = this.$route.path.indexOf("fakuma") != -1;

      console.log(this.$route.fullPath);
      var isFloorOne = this.$route.fullPath.indexOf("home?floor=1") != -1;
      var isFloorTwo = this.$route.fullPath.indexOf("home?floor=2") != -1;

      if (
        this.$route.fullPath.indexOf("foundation/pc/home") != -1 &&
        !isFloorTwo
      ) {
        isFloorOne = true;
      }

      if (isfoundation) {
        if (item.number == 1 && isFloorOne) {
          return true;
        } else if (item.number == 2 && isFloorTwo) {
          return true;
        }
        // console.log("isfoundation", item.number, isFloorOne);

        return false;
      } else if (isfakuma) {
        if (item.number == 4) {
          return true;
        }
        return false;
      }
      return false;
      // return (
      //   (item.number == 4 && this.$route.path.indexOf("fakuma") != -1) ||
      //   ((item.number == 1 || item.number == 2) &&
      //     this.$route.path.indexOf("foundation") != -1)
      // );
    },
    // 楼层跳转
    handleToUrl(record) {
      // if (record.type == 1 && record.title !== 'Fakuma') {
      //   window.open('https://showroom.chinacloudsites.cn/', '_blank')
      // }

      if (record.type == 1) {
        if (record.number == 1) {
          this.$router.push("/foundation/pc/home?floor=1.2");
        } else if (record.number == 2) {
          this.$router.push("/foundation/pc/home?floor=2.1");
        } else if (record.number == 4) {
          this.$router.push("/fakuma/pc/home");
        }
      } else if (record.url.length > 0 && record.url != "正在建设") {
        window.open(record.url, "_blank");
      }
      this.handleMantle();
    },
    // 获取蒙层
    handleMantle() {
      this.mantle = false;
    },
    // 获取楼层
    async handleGetFloorList() {
      const params = {
        language: this.lang
      };
      const res = await api.getFloorList(params);
      this.mantle = true;
      this.floorList = res.data;
    },
    // 菜单跳转
    handleClickMenus(path) {
      if (path === "floor") {
        this.handleGetFloorList();
        return false;
      }
      if (path === "sample") {
        let url = "";
        if (this.lang === "en") {
          url = "https://solutions.covestro.com/en/account/register";
        }
        if (this.lang === "zh") {
          url = "https://solutions.covestro.com/zh/account/register";
        }
        if (this.lang === "de") {
          url = "https://solutions.covestro.com/de/account/register";
        }
        window.open(url, "_blank");
        return false;
      }
      if (this.lang === "zh" && path === "customer") {
        return false;
      }
      if (this.isFoundation && path === "contactUs") {
        window.open(
          `https://www.covestro.com/${
            this.lang === "zh" ? "zh-cn" : "en"
          }/contact`,
          "_blank"
        );
        return false;
      }
      if (this.isFoundation && path == "companyProfile") {
        this.$router.push({
          path: `/foundation/wap/aboutUsList`
        });
        return false;
      }
      console.log("schedule", path);
      if (path == "schedule") {
        if (!this.userInfo) {
          this.isShowLogin("show");
          return false;
        }
      }
      this.$router.push({
        path: `/${this.isFoundation ? "foundation" : "fakuma"}/pc/${path}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.activeMenu {
  color: #000;
}
.blueColor {
  color: #009fe4 !important;
}
.headerWrap {
  .loginImg {
    img {
      height: 46px;
      vertical-align: middle;
    }
  }
  .headerBox {
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    ul {
      li {
        position: relative;
        float: left;
        margin-left: 30px;
        cursor: pointer;
        img {
          vertical-align: middle;
          margin-top: -3px;
        }
        // &:hover {
        //   color: #409eff;
        // }
      }
    }
  }
  .floorBox {
    position: absolute;
    right: -100px;
    z-index: 100;
    .item {
      display: inline-block;
      min-width: 300px;
      height: 60px;
      background: #fff;
      margin-top: 20px;
      border-radius: 8px;
      padding: 0 20px;
      b {
        display: inline-block;
        width: 35px;
        height: 35px;
        line-height: 31px;
        border-radius: 50%;
        color: #ff7f41;
        border: 2px solid;
        text-align: center;
        margin-top: 12px;
        margin-right: 10px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .grayActive {
    opacity: 0.5 !important;
  }
  .redActive {
    background: linear-gradient(to right, #ff7f41, #e6007e) !important;
    b {
      color: #fff !important;
    }
    span {
      color: #fff;
    }
  }
}
</style>
